<template>
  <div class="container">
    <h2>用户管理</h2>
    <p class="success">已登入管理员</p>
    <button @click="goToLoginpage">返回登入界面</button>
    <!-- 用户表单 -->
    <form v-if="showForm" @submit.prevent="handleFormSubmit">
      <div class="form-group">
        <label for="name">姓名</label>
        <input type="text" id="name" v-model="formData.name" required />
      </div>
      <div class="form-group">
        <label for="age">年龄</label>
        <input type="number" id="age" v-model="formData.age" required />
      </div>
      <div class="form-group">
        <label for="address">地址</label>
        <input type="text" id="address" v-model="formData.address" required />
      </div>
      <button type="submit">{{ isEditing ? '更新' : '保存' }}</button>
      <button type="button" @click="cancelForm">取消</button>
    </form>
    <-- 用户列表 -->
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>地址</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(user,index) in users" :key="index">
          <td>{{ user.name }}</td>
          <td>{{ user.age }}</td>
          <td>{{ user.address }}</td>
          <td>
            <button @click="editUser(index)">编辑</button>/
            <button @click="deleteUser(index)">删除</button>/
          </td>
        </tr>
      </tbody>
    </table>

    <button @click="addUser">新增用户</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { name: '张三', age: 25, address: '北京' },
        { name: '李四', age: 30, address: '上海' },
        { name: '王五', age: 35, address: '厦门' }
      ],
      showForm: false,
      formData: { name: '', age: null, address: '' },
      isEditing: false,
      editUserIndex: -1,
    };
  },
  methods: {
    addUser() {
      this.showForm = true;
      this.isEditing = false;
      this.formData = { name: '', age: null, address: '' };
    },
    editUser(index) {
      const suer = this.users[index];
      this.showForm = true;
      this.isEditing = true;
      this.editingIndex = index;
      this.formData = { ...suer };
    },
    deleteUser(index) {
      if (confirm('确定要删除这条记录吗？')) {
        this.users.splice(index, 1);
      }
    },
    handleFormSubmit() {
      if (this.isEditing) {
        this.users[this.editingIndex] = {...this.formData};
      } else {
        this.users.push({...this.formData });
      }
      this.cancelForm();
    },
    cancelForm() {
      this.showForm = false;
      this.isEditing = false;
      this.editingIndex = -1;
      this.formData = { name: '', age: null, address: '' };
    },
    goToLoginpage() {
      this.$router.push('/');
    }
  }
};
</script>
<style scoped>
.container {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  whidth: 80%;
  margin: 20px auto;
}
.form-group {
  margin-bottom: 10px;
}
.form-group label {
  display: block;
  margin-bottom: 5px;
}
.form-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
button {
  padding: 10px;
  margin: 5px 0;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
button:hover {
  background-color: #0056b3;
}
button[type="button"] {
  background-color: #6c757b;
}
button[type="button"]:hover {
  background-color: #5a6268;
}
.success {
  color: green;
  margin-top: 5px;
}
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}
th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}
th {
  background-color: #f2f2f2;
}
</style>